<template>
  <div class="giftbox">
    <Navbar></Navbar>
    <Topper></Topper>
    <List></List>
    <hr/>
    <p><Breadcrumb></Breadcrumb></p>
    <!-- <div class="giftbox_content">
      <div class="block" v-for="item in giftboxsArray" :key="item.id">

        <el-image
          style="width: 300px; height: 300px; display: block"
          :src="item.url"
          @click="toDetail()"
        >
        </el-image>
        {{ item.flowName }}
        <p class="price">￥{{ item.price }}</p>
      </div>
    </div> -->
    <giftbox></giftbox>
    <Footer></Footer>
  </div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import Topper from "@/components/Topper.vue";
import Footer from "@/components/Footer";
import giftbox from "@/components/Giftbox";
import List from "@/components/List.vue";
import Breadcrumb from '@/components/Breadcrumb.vue';
export default {
  data() {
    return {
      giftboxsArray: [
        
      ],
    };
  },
  components: {
    Navbar,
    Topper,
    List,
    Footer,
    giftbox,
    Breadcrumb
  },
};
</script>

<style lang="scss">
.giftbox {
  hr {
      border: none; /* 移除默认的边框 */
      height: 2px; /* 设置水平线的高度 */
      background-color: #884e22; /* 设置水平线的颜色 */
      margin: 20px 0; /* 设置上下外边距 */
    }
  .giftbox_content {
    background-color: #f5f5f5;
    margin: auto;
    width: 80%;
    .block {
      margin-top: 15px;
      padding: 10px;
      margin-left: 45px;
      background-color: #ffffff;
      display: inline-block;
      // border: 1px solid black;
      // float: left;
      .price {
        color: red;
        font-size: 24px;
      }
    }
  }
}
</style>